<template>
  <div>
    <a-form-model
      id="components-form-demo-normal-login"
      :model="model"
      ref="form"
      class="register-form"
      @keyup.enter.native="handleSubmit"
      :rules="validatorRules"
    >
      <!-- 企业名称 -->
      <a-form-model-item required prop="name">
        <a-input
          v-model="model.name"
          size="large"
          type="text"
          autocomplete="false"
          placeholder="请输入企业名称"
        >
          <a-icon
            slot="prefix"
            type="lock"
            :style="{ color: 'rgba(0,0,0,.25)' }"
          />
        </a-input>
      </a-form-model-item>
      <!-- 经营场所 -->
      <a-form-model-item required prop="busAddress">
        <a-input
          v-model="model.busAddress"
          size="large"
          type="text"
          autocomplete="false"
          placeholder="请选择经营场所"
        >
          <a-icon
            slot="prefix"
            type="lock"
            :style="{ color: 'rgba(0,0,0,.25)' }"
          />
        </a-input>
      </a-form-model-item>

      <!-- 单位性质 -->
      <a-form-model-item required prop="nature">
        <a-input
          v-model="model.nature"
          size="large"
          type="text"
          autocomplete="false"
          placeholder="请选择单位性质"
        >
          <a-icon
            slot="prefix"
            type="lock"
            :style="{ color: 'rgba(0,0,0,.25)' }"
          />
        </a-input>
      </a-form-model-item>
      <!-- 请选择所属行业 -->
   
      <a-form-model-item required prop="industry">
         <j-dict-select-tag
            @change="handleChange"
            type="list"
            dictCode="hylt_accounting_industry,industry_name,id"
            placeholder="请选择所属行业"
            v-model="model.industry"
          />
      </a-form-model-item>
      <!-- 统一社会信用代码 -->
      <a-form-model-item required prop="creditCode">
        <a-input
          v-model="model.creditCode"
          size="large"
          type="text"
          autocomplete="false"
          placeholder="请输入统一社会信用代码"
        >
          <a-icon
            slot="prefix"
            type="lock"
            :style="{ color: 'rgba(0,0,0,.25)' }"
          />
        </a-input>
      </a-form-model-item>
      <!-- 法定代表人 -->
      <a-form-model-item required prop="corporation">
        <a-input
          v-model="model.corporation"
          size="large"
          type="text"
          autocomplete="false"
          placeholder="请输入法定代表人"
        >
          <a-icon
            slot="prefix"
            type="lock"
            :style="{ color: 'rgba(0,0,0,.25)' }"
          />
        </a-input>
      </a-form-model-item>
      <!-- 企业注册地址 -->
      <a-form-model-item required prop="regAddress">
        <a-input
          v-model="model.regAddress"
          size="large"
          type="text"
          autocomplete="false"
          placeholder="请输入企业注册地址"
        >
          <a-icon
            slot="prefix"
            type="lock"
            :style="{ color: 'rgba(0,0,0,.25)' }"
          />
        </a-input>
      </a-form-model-item>
      <!-- 企业注册日期 -->
      <a-form-model-item required prop="registTime">
        <a-input
          v-model="model.registTime"
          size="large"
          type="text"
          autocomplete="false"
          placeholder="请输入注册日期"
        >
          <a-icon
            slot="prefix"
            type="lock"
            :style="{ color: 'rgba(0,0,0,.25)' }"
          />
        </a-input>
      </a-form-model-item>
      <!-- 上传营业执照 -->
      <!-- <a-form-model-item prop="busLicence">
        <a-upload
          :before-upload="beforeUpload"
          @change="handleChange"
          name="busLicence"
          action="/upload.do"
          list-type="picture"
        >
          <a-button> <a-icon type="upload" /> 上传营业执照 </a-button>
        </a-upload>
      </a-form-model-item> -->
      <a-form-model-item>
        <!-- <div @click="handleChangeCheckCode">刷新验证码</div> -->
        <a-button
          type="primary"
          @click.stop.prevent="handleSubmit"
          class="login-form-button"
        >
          提交审核
        </a-button>

        <a
          @click="
            () => {
              $router.push('/login');
            }
          "
        >
          返回登录
        </a>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
}
import { duplicateCheck } from "@/api/api";
import { getAction, postAction } from "@/api/manage";
import bus from "@/bus";
export default {
  name: "registerAccount",
  data() {
    return {
      model: {
        name: "测试1",
        nature: 1,
        industry: "钢铁",
        creditCode: "111111",
        corporation: "王五",
        regAddress: "测试地址",
        registTime: "2022-02-03",
        busAddress: "经营场所1",
      },
      fileList: null,
      validatorRules: {
        name: [{ required: true, message: "请输入企业名称!" }],
        nature: [{ required: true, message: "请选择单位性质!" }],
        industry: [{ required: true, message: "请选择所属行业!" }],
        creditCode: [{ required: true, message: "请输入统一社会信用代码!" }],
        corporation: [{ required: true, message: "请输入法定代表人!" }],
        regAddress: [{ required: true, message: "请输入企业注册地址!" }],
        registTime: [{ required: true, message: "请输入企业注册日期!" }],
        busAddress: [{ required: true, message: "请输入经营场所!" }],
        industryCode: [{ required: true, message: "请输入企业编码!" }],
        userName: [{ required: true, message: "请输入用户账号!" }],
        phone: [
          { required: true, message: "请输入手机号!" },
          { validator: this.validatePhone },
        ],
        busLicence: [
          {
            required: true,
            validator: this.uploadFileChange,
            trigger: ["change"],
          },
        ],
      },
      time: 60, // 发送验证码倒计时
      sendMsgDisabled: false,
    };
  },
  watch: {
    fileList: {
      handler: function (val, oldVal) {
        if (val.length == 0) {
          // null 来触发校验
          this.model.fileList = null;
        } else {
          this.model.fileList = JSON.stringify(val);
        }
      },
    },
  },

  methods: {
    // 自定义上传附件校验
    uploadFileChange(rule, value, callback) {
      if (this.fileList.length === 0) {
        return callback("请选择需要上传的文件");
      } else {
        return true;
      }
    },

    beforeUpload(file) {
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        this.$message.error("You can only upload JPG file!");
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("Image must smaller than 2MB!");
      }
      return isJpgOrPng && isLt2M;
    },
    handleChange(info) {
      if (info.file.status === "uploading") {
        this.loading = true;
        return;
      }
      if (info.file.status === "done") {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, (imageUrl) => {
          this.imageUrl = imageUrl;
          this.loading = false;
        });
      }
    },
    normFile(e) {
      alert(1);
      //   console.log("Upload event:", e);
      if (Array.isArray(e)) {
        return e;
      }
      return e && e.fileList;
    },
    // 登录事件
    handleSubmit(e) {
      //   this.handleLogin();
      this.$refs["form"].validate((success) => {
        if (success) {
          bus.$emit("saveRegisterData", this.model);
        }
      });
    },
    getCode() {
      this.validateFields(["phone"], (err) => {
        if (!err) {
          const that = this;
          that.sendMsgDisabled = true;
          const interval = window.setInterval(function () {
            if (that.time-- <= 0) {
              that.time = 60;
              that.sendMsgDisabled = false;
              window.clearInterval(interval);
            }
          }, 1000);
        }
      });
    },

    validateUsername(rule, value, callback) {
      var params = {
        tableName: "sys_user",
        fieldName: "userName",
        fieldVal: value,
        dataId: this.userId,
      };
      duplicateCheck(params).then((res) => {
        if (res.success) {
          callback();
        } else {
          callback("用户名已存在!");
        }
      });
    },
    validatePhone(rule, value, callback) {
      if (!value) {
        callback();
      } else {
        if (new RegExp(/^1[3|4|5|7|8|9][0-9]\d{8}$/).test(value)) {
          callback();
          //   var params = {
          //     tableName: "sys_user",
          //     fieldName: "phone",
          //     fieldVal: value,
          //     dataId: this.userId,
          //   };
          //   duplicateCheck(params).then((res) => {
          //     if (res.success) {
          //       callback();
          //     } else {
          //       callback("手机号已存在!");
          //     }
          //   });
        } else {
          callback("请输入正确格式的手机号码!");
        }
      }
    },
    validateToNextPassword(rule, value, callback) {
      const confirmpassword = this.model.confirmpassword;
      if (value && confirmpassword && value !== confirmpassword) {
        callback("两次输入的密码不一样！");
      }
      if (value && this.confirmDirty) {
        this.$refs.form.validateField(["confirmpassword"]);
      }
      callback();
    },
    compareToFirstPassword(rule, value, callback) {
      if (value && value !== this.model.password) {
        callback("两次输入的密码不一样！");
      } else {
        callback();
      }
    },
    /**
     * 验证字段
     * @param arr
     * @param callback
     */
    validateFields(arr, callback) {
      let promiseArray = [];
      for (let item of arr) {
        let p = new Promise((resolve, reject) => {
          this.$refs["form"].validateField(item, (err) => {
            if (!err) {
              resolve();
            } else {
              reject(err);
            }
          });
        });
        promiseArray.push(p);
      }
      Promise.all(promiseArray)
        .then(() => {
          callback();
        })
        .catch((err) => {
          callback(err);
        });
    },
    handleRememberMeChange(e) {
      this.rememberMe = e.target.checked;
    },
  },
};
</script>

<style lang="scss">
.register-form {
  min-width: 500px;
  padding: 0 40px;
  .code_ {
    position: absolute;
    right: -90px;
    top: -3px;
    cursor: pointer;
    color: #0c67ee;
    font-size: 12px;
  }
  .ant-select-selection--single{
     height: 40px  !important;
    line-height: 40px !important;
  }
  .ant-select-selection__rendered{
    height: 40px  !important;
    line-height: 40px !important;
  }
}
</style>